<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-lx-cascades'></i> 成绩录入
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
                <el-select clearable v-model='query.semester' placeholder='学期' class='handle-select mr10'>
                    <template v-for='item in semesters'>
                        <el-option key='1' :label='item' :value='item'></el-option>
                    </template>
                </el-select>
                <el-select clearable v-model='query.courseName' placeholder='课程' class='handle-select mr10'>
                    <template v-for='item in courseNames'>
                        <el-option key='1' :label='item' :value='item'></el-option>
                    </template>
                </el-select>
                <el-button type='warning' icon='el-icon-lx-filter' @click='handleFilter' class='btn'></el-button>
                <div style='width: 20px; display: inline-block'></div>
                <el-input v-if='role === "supervisor"' v-model='query.teacherName' placeholder='教师姓名' class='handle-input mr10' style='width: 100px'></el-input>
                <el-button v-if='role === "supervisor"' type='warning' icon='el-icon-search' @click='handleFilter' class='btn'></el-button>
                <el-button type='warning' icon='el-icon-refresh' @click='load_status' style='position: absolute; right: 60px' class='btn'></el-button>
            </div>
            <el-table
                :data='tableData'
                border
                class='table'
                ref='multipleTable'
                header-cell-class-name='table-header'
                @selection-change='handleSelectionChange'
                @cell-mouse-enter="ncrFormat"
                @cell-mouse-leave="showClickIcon=false"
            >
                <el-table-column prop='teacherId' label='教师编号' width='105' align='center'></el-table-column>
                <el-table-column prop='teacherName' label='教师姓名' width='105' align='center'></el-table-column>
                <el-table-column prop='courseId' label='课程编号' width='105' align='center'></el-table-column>
                <el-table-column prop='courseName' label='课程名' width='105' align='center'></el-table-column>
                <el-table-column prop='classId' label='授课班级编号' width='105' align='center'></el-table-column>
<!--                <el-table-column prop='time' label='课程学时' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='credit' label='课程学分' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='type' label='考试/考察' width='105' align='center'></el-table-column>-->
                <el-table-column prop='semester' label='学期' width='105'></el-table-column>
                <el-table-column label='录入成绩'>
                    <template #default='scope'>
<!--                        <router-link :to="{path:'/gradeInsert',-->
<!--                            query:{-->
<!--                                courseId:scope.row.courseId,-->
<!--                                classId: scope.row.classId-->
<!--                            }}">-->
<!--                            录入成绩-->
<!--                        </router-link>-->
                        <form id="table_img_file" enctype="multipart/form-data">
<!--                            <label>数据表(csv)</label>-->
<!--                            <input type="file" name="table" class="form-control">-->

                            <el-upload v-if="showClickIcon===true&&scope.row.teacherId===rowTeacherId&&scope.row.courseId===rowCourseId"
                                style="margin-right: 8px"
                                :show-file-list="false"
                                :before-upload="beforeUpload"
                                :on-success="onSuccess"
                                :on-error="onError"
                                accept=".xls"
                                action="http://localhost:8443/api/addGrade">
                                <i class='el-icon-upload'></i>
                                <div class='el-upload__text'>
                                    将文件拖到此处，或<em>点击上传</em>
                                </div>
                            </el-upload>
<!--                            <el-button style="margin-left: 10px;" type='warning' class="btn" @click="handleUpload">录入</el-button>-->
                        </form>
                    </template>
                </el-table-column>
            </el-table>
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import CodeDetail from '@/components/common/CodeDetail';
import Qs from 'qs'
export default {
    name: 'grade',
    data() {
        return {
            query: {
                studentName: '',
                teacherName: '',
                courseName: '',
                semester: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            filList: [],
            semesters: [],
            courseNames: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,
            formData: new FormData(),
            fil: [],
            showClickIcon: false,
            rowCourseId: '',
            rowTeacherId: '',
            rowData: []
        };
    },
    mounted:function(){
        this.load_status()
    },
    methods: {
        load_status() {
            let _this = this
            this.$axios.get('/semesters').then(resp => {
                if(resp && resp.status === 200) {
                    _this.semesters = resp.data
                }
            })
            if(this.role === 'supervisor') {
                this.$axios.get('/teachInfo').then(resp => {
                    if(resp && resp.status === 200) {
                        _this.tableData = resp.data
                    }
                })
                this.$axios.get('/course-names').then(resp => {
                    if(resp && resp.status === 200) {
                        _this.courseNames = resp.data
                    }
                })
            }
            else {
                let id = localStorage.getItem("ms_userid");
                let role = this.role
                // console.log(id)
                this.$axios.post('/teachInfo/filter', Qs.stringify({
                    "id": id,
                    "courseName": "",
                    "semester": "",
                    "type": role,
                    "teacherName": ""})).then(resp => {
                    if(resp && resp.status === 200) {
                        _this.tableData = resp.data
                    }
                })
                this.$axios.post('/course-names/' + role, Qs.stringify({"id": id}) ).then(resp => {
                    if(resp && resp.status === 200) {
                        _this.courseNames = resp.data
                    }
                })
            }
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.$axios.get("/status/" + this.query.name + "/person").then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
        },
        handleFilter() {
            this.$set(this.query, 'pageIndex', 1);
            let _this = this
            let semester = this.query.semester
            let courseName = this.query.courseName
            let id = localStorage.getItem("ms_userid");
            let role = this.role
            let studentName = this.query.studentName
            let teacherName = this.query.teacherName
            this.$axios.post('/teachInfo/filter', Qs.stringify({
                "id": id,
                "courseName": courseName,
                "semester": semester,
                "type": role,
                "teacherName": teacherName})).then(resp => {
                if(resp && resp.status === 200) {
                    _this.tableData = resp.data
                }
            })
        },
        addFile() {
            let inputDOM = this.$refs.file
            this.fil = inputDOM.files
            this.formData.append("file", this.fil[0])
            console.log(this.fil[0])
            console.log(this.formData)
        },
        async BatchExportExcel(data){
            return this.Promise(this.$axios.post('/addGrade',data,{
                headers: {
                    "Content-Type": "multipart/form-data"
                }
            }))
        },

        delFile() {
            this.fileList = [];
        },
        handleChange(file, fileList) {
            this.fileList = fileList;
        },
        uploadFile(file) {
            this.formData.append("file", file.file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleUpload(){
            // var data = new FormData($("#table_img_file")[0]);
            // var url = "add";
            // console.log("?")
                let formData = new FormData;
                let _this = this
                formData.append("file", this.fileList[0].raw)
                this.$axios({
                    url: "/addGrade",
                    method: "post",
                    data: formData,
                    headers: {
                        "Content-Type": "multipart/form-data;charset=utf-8"
                    }
                }).then(resp => {
                        if(resp && resp.status === 200) {
                            _this.$message.success("上传成功")
                            _this.$route.replace("/gradeInfo")
                        }
                        else {
                            _this.$message.warning("上传失败")
                        }
                    })
        },
        onSuccess(response, file, fileList){
            this.importDataButtonMsg='导入数据';
            this.importDataButtonIcon='el-icon-upload2';
            this.importDataButtonDisabled=false;
            // console.log(response.status)
            // if (response.status === 200){
                this.$message.success("上传成功")
                this.$router.push("/gradeInfo")
            // }else if (response.status === 500){
            //     this.$message.error({message:response.msg})
            // }else {
            //     this.$message.error({message:'未知错误'})
            // }
        },
        onError(err, file, fileList){
            this.importDataButtonMsg='导入数据';
            this.importDataButtonIcon='el-icon-upload2';
            this.importDataButtonDisabled=false;
            this.$message.error(err);
        },
        beforeUpload(){
            this.importDataButtonMsg='正在上传';
            this.importDataButtonIcon='el-icon-loading';
            this.importDataButtonDisabled=true;
        },
        ncrFormat(row){
            this.showClickIcon=true
            this.rowTeacherId=row.teacherId
            this.rowCourseId=row.courseId
            this.rowData=row
        },
    },
    computed: {
        role() {
            return localStorage.getItem("ms_character");
        }
    },
    components: {
        // CodeDetail
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    /*font-size: 14px;*/
}

.mr10 {
    margin-right: 10px;
}
.el-upload--picture-card{
    display: none
}

</style>
